<div *ngIf="Hero">
  <md-card>
    <md-card-title>
      <md-card-title-text>
        <span class="md-headline">{{ Hero.Champion.CnNickName }}&nbsp;{{ Hero.Champion.CnName }}</span>
        <span class="md-subhead">{{ Hero.Champion.Name | uppercase}}</span>
      </md-card-title-text>
      <md-card-title-media>
        <img class="card-media md-media-sm" src="{{ Hero.Champion.AvatarUrl }}">
      </md-card-title-media>
    </md-card-title>
    <md-card-actions layout="row" layout-align="end center">
      <p style="margin-right: 10px;">Rank:{{ Hero.Champion.NexusRank }}</p>
      <p>平均胜率:{{ Hero.Champion.AverageWinPercent }}</p>
    </md-card-actions>
  </md-card>
  <md-card>
    <ul class="stats">
      <li *ngFor="let stats of Hero.Statistics;let i=index">
        <span style="float: left;">
          {{ stats.Title }}
        </span>

        <span class="stats-data">
          {{ stats.Data }}
        </span>

        <span [ng2-highcharts]="ChartData[i]" style="float: right"></span>
      </li>
    </ul>
  </md-card>
  <md-card>
    <md-card-header>
      <md-card-avatar>
        <img class="md-user-avatar" [src]="Hero.SummonerBuilds[0].HeadshotAvatarUrl"/>
      </md-card-avatar>
      <md-card-header-text>
        <span class="md-title">{{ Hero.SummonerBuilds[0].Name }}</span>
        <span class="md-subhead">{{ Hero.SummonerBuilds[0].GameTimeEpoch }}</span>
      </md-card-header-text>
      <md-card-header-text>
        <span class="md-title">
          {{ Hero.SummonerBuilds[0].Kill }}/{{ Hero.SummonerBuilds[0].Death }}/{{ Hero.SummonerBuilds[0].Assist }}
        </span>
        <span class="md-subhead">
          {{ Hero.SummonerBuilds[0].Won?'win':'Define' }} - {{ Hero.SummonerBuilds[0].Duration }}分钟
        </span>
      </md-card-header-text>
    </md-card-header>
    <md-card-content>
      <div>
        <ul class="final-item">
          <ol *ngFor="let item of Hero.SummonerBuilds[0].FinalItemBuys" class="item">
            <img [src]="item.AvatarUrl">
          </ol>
        </ul>
      </div>
      <div>

      </div>
      <div>

      </div>
    </md-card-content>
  </md-card>
</div>

